<template>
  <div class="platformContainer">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="card_title">WIFI政策</span>
      </div>
      <span class="tag1_text">同一服务器仅首次需要新建服务器，更新令牌仅需ABM后台下载令牌，操作第三步上传令牌即可</span>
      <span class="tag2_text">服务器通讯地址：https://saas2.mdm.zu99.cn/mdm/enroll</span>
      <div class="step">
        <el-steps :active="3" align-center>
          <el-step>
            <template slot="title">
              <div class="step_content">
                <div class="iconStyle">
                  <i class="iconfont icon-xiazai font"></i>
                  <el-button type="text" class="font">DEP令牌请求文件</el-button>
                </div>
                <p class="p_style">下载DEP令牌请求文件</p>
                <el-button type="primary" size="small">下载</el-button>
              </div>
            </template>
          </el-step>
          <el-step>
            <template slot="title">
              <div class="step_content">
                <div class="iconStyle">
                  <i class="iconfont icon-fangyu font"></i>
                  <el-button type="text" class="font">换取令牌</el-button>
                </div>
                <p class="p_style">持下载的DPE令牌请求文件，到苹果ABM网站换取服务器令牌。<el-button type="text" style="color: red;font-weight: bold;">【查看详细步骤】</el-button></p>
                <el-button type="primary" size="small">打开ABM官网</el-button>
              </div>
            </template>
          </el-step>
          <el-step>
            <template slot="title">
              <div class="step_content">
                <div class="iconStyle">
                  <i class="iconfont icon-shangchuan font"></i>
                  <el-button type="text" class="font">上传令牌</el-button>
                </div>
                <p class="p_style">将第二步申请的令牌(后缀为.p7m，注意不要修改文件)，上传至MDM平台</p>
                <el-button type="primary" size="small">上传</el-button>
              </div>
            </template>
          </el-step>

        </el-steps>
      </div>
    </el-card>
  </div>
</template>
<script>



export default {
  data() {
    return {

    }
  },
  methods: {

  },
  // 使用
  mounted() {
    this.$nextTick(() => {
    });
  },
}
</script>
<style scoped>
.exit_container .iconStyle {
  margin: 0 .1875rem;
  cursor: pointer;
}

.iconStyle .el-button {
  color: black;
}

.card_title {
  font-size: medium;
  font-weight: bold;

}

.box-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box-card .tag1_text {
  display: block;
  padding: .25rem 0;
  font-size: .2rem;
  color: #bec2c2;
}

.platformContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tag2_text {
  font-size: .175rem;
  color: red;
  font-weight: bold;
}

.step {
  padding: .5rem 0 0;
  width: 80%;
}

.step_content {
  padding: .125rem 0;
}

.font {
  font-weight: bold;
  font-size: .225rem !important;
}

.p_style {
  font-size: .175rem !important;
  width: 3.625rem;
}
.step_content{
  display: flex;
  flex-direction: column;
  align-items: center;
}

::v-deep .el-step__title.is-finish{
  color: #635f73;
}
</style>